<template>
  <div class="screen-container">
    <div class="cover-img-box">
      <img class="cover-img" src="/static/picture/about.jpg" alt="">
    </div>
    <div class="about-text-box">
      <h3>ABOUT US</h3>
      <h4>Quick Transport and Logistics Solutions</h4>
      <p>Tempor erat elitr rebum at clita. Diam dolor diam ipsum sit. Aliqu diam amet diam et eos. Clita erat ipsum et lorem et sit, sed stet lorem sit clita duo justo magna dolore erat amet</p>
      <div class="picture-box">
        <div class="pt-box">
          <div class="icon-box">
            <IconEarth />
          </div>
          <h5>Global Coverage</h5>
          <p>Stet stet justo dolor sed duo. Ut clita sea sit ipsum diam lorem diam justo</p>
        </div>
        <div class="pt-box">
          <div class="icon-box">
            <IconTruck />
          </div>
          <h5>On Time Delivery</h5>
          <p>Stet stet justo dolor sed duo. Ut clita sea sit ipsum diam lorem diam justo</p>
        </div>
      </div>
      <div class="btn-explore">Explore More</div>
    </div>
  </div>
</template>

<script setup>
import IconEarth from '~icons/my-icons/earth'
import IconTruck from '~icons/my-icons/truck'
</script>

<style lang="scss" scoped>
$base-color: #ff3e41;
.screen-container {
  width: 100%;
  height: 520px;
  display: flex;

  .cover-img-box {
    position: relative;
    width: 50%;
    min-width: 640px;
    height: 100%;
    overflow: hidden;
  }

  .cover-img {
    position: absolute;
    left: -25%;
    top: -15%;
    width: 120%;
    height: 150%;
  }

  .about-text-box {
    position: relative;
    width: 650px;
    padding-left: 34px;
    text-align: left;

    h3 {
      font-size: 18px;
      color: #51CFED;
    }

    h4 {
      padding-top: 12px;
      font-size: 42px;
      line-height: 45px;
      padding-bottom: 57px;
    }

    p {
      font-size: 18px;
      color: gray;
    }

    .picture-box {
      padding-top: 47px;
      width: 650px;
      display: flex;

      .pt-box {
        .icon-box svg {
          width: 48px;
          height: 48px;
        }

        h5 {
          padding: 7px 0;
          line-height: 28px;
          font-size: 18px;
        }
      }
    }

    .btn-explore {
      position: absolute;
      left: 34px;
      bottom: 0;
      width: 182px;
      padding: 17px 0;
      text-align: center;
      background-color: $base-color;
      color: white;
    }
  }
}
</style>
